<template>
    <!-- 顶部按钮 -->
    <div>
        <!-- 图层对话框 -->
        <coverage v-show="coverageIsShow" :key="coverageKey" />
        <drawing v-show="drawingIsShow" />
        <measure v-show="measure" />
        <!-- tif偏移设置 -->
        <skewingAmend v-if="skewingAmend"></skewingAmend>
        <!-- 瓦片图层偏移设置 -->
        <tileAdjustment v-if="tileAdjustment"></tileAdjustment>
        <div class="topBtns">
            <div class="leftFunc">
                <el-button type="info" class="btnList" @click="setCoverage">
                    <img class="btnsImages" src="@/assets/image/btns/layer.png" alt="" />
                    图层
                </el-button>
                <div class="searchInput">
                    <el-autocomplete
                        class="inline-input"
                        popper-class="my-autocomplete"
                        v-model="querySearchState"
                        :fetch-suggestions="querySearch"
                        placeholder="请输入内容"
                        :trigger-on-focus="false"
                        @select="handleSelect"
                        prefix-icon="el-icon-search"
                    >
                        <template slot-scope="{ item }">
                            <div class="name" :title="item.name">
                                {{ item.name }}
                                <br />
                                <span class="addr" :title="`${item.xzqh}${item.address}`">{{ item.xzqh }}{{ item.address }}</span>
                            </div>
                        </template>
                    </el-autocomplete>
                </div>
            </div>
            <div class="topBtnsBox">
                <el-button type="info" class="btnList" @click="$router.back()">
                    <img class="btnsImages" src="@/assets/image/btns/back.png" alt="" />
                    返回
                </el-button>
                <el-button type="info" class="btnList" @click="addContourLines(true)">
                    <i class="fa fa-object-ungroup btnsImages"></i>
                    <!-- <img class="btnsImages" src="@/assets/image/btns/Save.png" alt="" /> -->
                    等高线
                </el-button>
                <!-- <el-button type="info" class="btnList">
                    <img class="btnsImages" src="@/assets/image/btns/Save.png" alt="" />
                    保存
                </el-button> -->
                <el-dropdown style="margin-left: 10px" trigger="click" @command="handleCompanyChange">
                    <el-button type="info" class="btnList" icon="fa fa-cubes">
                        <!-- <img class="btnsImages" src="@/assets/image/btns/toolbox.png" alt="" /> -->
                        工具
                        <i class="el-icon-caret-bottom el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-for="item in dropdownList" :key="item.name" :icon="item.icon" :command="item">{{ item.name }}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
        <!-- 高等线 -->
        <contourLines v-show="contourLinesIsShow" @ContourLiness="addContourLines" />
    </div>
</template>
<script>
import coverage from '@/components/tool/coverage/coverage.vue'
import skewingAmend from '@/components/tool/coverage/skewingAmend.vue'
import tileAdjustment from '@/components/tool/coverage/tileAdjustment.vue'
import drawing from '@/components/tool/tools/drawing/drawing.vue'
import measure from '@/components/tool/tools/measure/measure.vue'
import contourLines from '@/components/tool/contourLines/contourLines.vue'

import { btnToolConfig } from './utils/btnTool.config'
import { coverageVmFunc } from './tool/coverage/utils/coverage.config'
import { initMap } from './utils/initMap'
export default {
    name: 'topBtns',
    components: {
        coverage,
        drawing,
        measure,
        contourLines,
        skewingAmend,
        tileAdjustment
    },
    data() {
        return {
            dropdownList: [],
            coverageKey: new Date().getTime(),
            contourLinesIsShow: false,
            querySearchState: ''
        }
    },
    computed: {
        coverageIsShow() {
            return this.$store.state.coverage
        },
        drawingIsShow() {
            return this.$store.state.drawing.isShow
        },

        measure() {
            return this.$store.state.measure.isShow
        },
        skewingAmend() {
            return this.$store.state.isSkewingAmend
        },
        tileAdjustment() {
            return this.$store.state.isTileAdjustment
        }
    },
    mounted() {
        // console.log(this.$store.state.coverage)
        this.dropdownList = btnToolConfig
        setTimeout(() => {
            coverageVmFunc(this)
        }, 300)
    },
    methods: {
        handleCompanyChange(item) {
            if (item) {
                if (item.type == 'mapPrint') {
                    // let latLng = map.getCenter()
                    // console.log(latLng)
                    // initMap.setMapConfig = {
                    //     scene: {
                    //         center: { lat: latLng.lat, lng: latLng.lng }
                    //     }
                    // }
                    this.$store.commit('setPrintMap')
                    this.$store.commit('setMeasure', 'off')
                    this.$store.commit('setDrawing')
                } else {
                    if (item.open == 'setMeasure') {
                        this.$store.commit('setDrawing')
                    } else if (item.open == 'setDrawing') {
                        this.$store.commit('setMeasure', 'off')
                    } else {
                        this.$store.commit('setMeasure', 'off')
                        this.$store.commit('setDrawing')
                    }
                    this.$store.commit(item.open, item.type)
                }
                // console.log(item)
            }
            if (this.$store.state.singleProperty) {
                // 关闭属性对话框
                this.$store.commit('setSingleProperty')
            }
        },
        setCoverage() {
            this.$store.commit('setCoverage')
        },
        // selectDropdown(open) {
        //     if (open) {
        //         this.$store.commit(open)
        //     }
        // }
        addContourLines(val) {
            // 添加等高线
            this.contourLinesIsShow = val
        },
        querySearch(searchText, callBack) {
            const queryPoi = new mars3d.query.GaodePOI()
            queryPoi.queryText({
                text: searchText,
                count: 15,
                page: 1,
                success: result => {
                    result.list.forEach(item => {
                        item.value = item.name
                    })
                    callBack(result.list)
                }
            })
        },
        handleSelect(item) {
            map.flyToPoint([item.x, item.y])
        }
    }
}
</script>
<style lang="scss" scoped>
.topBtns {
    display: flex;
    justify-content: space-between;
    position: fixed;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 999;
    .leftFunc {
        display: flex;
        justify-content: space-between;
        .searchInput {
            margin-left: 10px;
        }
    }
    .btnList {
        .btnsImages {
            width: 13px;
            height: 13px;
            vertical-align: middle;
            // margin-top: -4px;
            margin-right: 5px;
        }
    }
}
.my-autocomplete {
    li {
        line-height: normal;
        padding: 7px;

        .name {
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .addr {
            font-size: 12px;
            color: #b4b4b4;
            // margin-top: -30px;
            // position: absolute;
        }

        .highlighted .addr {
            color: #ddd;
        }
    }
}
</style>
<style>
.el-dropdown-menu.el-popper.el-dropdown-menu--mini,
.searchInput .el-input__inner {
    background-color: rgba(63, 72, 84, 0.7) !important;
    border: none;
    min-width: 0 !important;
}
/* .el-popper {
    background-color: rgba(63, 72, 84, 0.7) !important;
} */
.el-popper .popper__arrow::after,
.el-popper .popper__arrow {
    border-bottom-color: rgba(63, 72, 84, 0.7) !important;
}
.el-dropdown-menu__item {
    color: #fff;
}
.el-dropdown-menu--mini .el-dropdown-menu__item {
    line-height: 34px;
}
.el-dropdown-menu__item:not(.is-disabled):hover,
.el-dropdown-menu__item:focus {
    color: #fff;
    background-color: #4db3ff;
}
.searchInput .el-input__inner,
.my-autocomplete.el-autocomplete-suggestion li {
    color: #fff !important;
}
.my-autocomplete.el-autocomplete-suggestion li {
    line-height: 20px;
    margin-bottom: 10px;
}
.cesium-viewer-geocoderContainer {
    /* display: none; */
    left: 0;
    top: 50px;
    position: absolute;
}
.my-autocomplete.el-autocomplete-suggestion li:hover,
.my-autocomplete.el-autocomplete-suggestion li.highlighted {
    background-color: #606266;
}
</style>
